<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DataGrid</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="DataGrid">
	<meta name="author" content="xu.fei@outlook.com">

	<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.css" rel="stylesheet"/>
	<script type="text/javascript" src="../../libs/lodash/lodash.min.js"></script>
	<script type="text/javascript" src="../../js/thin.js"></script>
	<script type="text/javascript" src="../../js/modules/controls/datagrid.js"></script>
</head>
<body>
<div class="span12">
	<div class="header">
		<h3>Staff Management</h3>
	</div>
	<div>
		<div id="grid1" class="row"></div>
		<div class="row">
			<div class="header">
				<h4>Detail</h4>
			</div>
			<hr/>
			<form class="form-horizontal span6">
				<div class="control-group">
					<label class="control-label" for="inputIndex">Index</label>

					<div class="controls">
						<input type="text" id="inputIndex" placeholder="Index">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="selectGender">Gender</label>

					<div class="controls">
						<select id="selectGender">
							<option value="0">Female</option>
							<option value="1">Male</option>
						</select>
					</div>
				</div>
			</form>
			<form class="form-horizontal span6">
				<div class="control-group">
					<label class="control-label" for="inputName">Name</label>

					<div class="controls">
						<input type="text" id="inputName" placeholder="Name">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="inputAge">Age</label>

					<div class="controls">
						<input type="text" id="inputAge" placeholder="age">
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="modal-footer">
		<div id="operateBtns">
			<button class="btn btn-primary" onclick="newClicked()">New</button>
			<button class="btn btn-primary" onclick="modifyClicked()"><i class="icon-edit icon-white"></i>Modify
			</button>
			<button class="btn btn-primary" onclick="deleteClicked()"><i class="icon-remove icon-white"></i>Delete
			</button>
		</div>
		<div id="confirmBtns">
			<button class="btn btn-primary" onclick="okClicked()"><i class="icon-ok icon-white"></i>OK</button>
			<button class="btn btn-primary" onclick="cancelClicked()">Cancel</button>
		</div>
	</div>
</div>

<script type="text/javascript">
var DataGrid = thin.use("DataGrid");

var state = "View";

var grid = new DataGrid(document.getElementById("grid1"), {showCheckbox: true});

grid.on("loadCompleted", function (event) {
	if (event.target.rows.length > 0) {
		event.target.select(event.target.rows[0]);
	}
});

grid.on("changed", function (event) {
	var data;
	if (event.newRow) {
		data = event.newRow.data;
	}
	else {
		data = {};
	}

	setFormData(data);
});

grid.on("rowInserted", function (event) {
	event.target.select(event.newRow);
});

grid.on("rowRemoved", function (event) {
	if (event.target.rows.length > 0) {
		event.target.select(event.target.rows[0]);
	}
});

init();

function init() {
	enableForm(false);
	switchButtons("Operate");

	var columns = [
		{
			label: "#",
			field: "index"
		},
		{
			label: "Name",
			field: "name"
		},
		{
			label: "Gender",
			field: "gender",
			labelFunction: function (data, key) {
				var value = data[key];
				if (value == 0) {
					return "Female";
				}
				else if (value == 1) {
					return "Male";
				}
				else {
					return "Unknown"
				}
			}
		},
		{
			label: "Age",
			field: "age",
			headerRenderer: {
				render: function (grid, field, columnIndex) {
					var rows = grid.rows;
					var div = document.createElement("div");

					var span = document.createElement("span");
					span.innerHTML = grid.columns[columnIndex].label;
					div.appendChild(span);

					span = document.createElement("span");

					var totalAge = 0;
					for (var i = 0; i < grid.rows.length; i++) {
						totalAge += (grid.rows[i].get("age") - 0);
					}

					span.innerHTML = " --average: " + Math.round(totalAge / grid.rows.length);
					div.appendChild(span);
					return div;
				}
			},
			itemRenderer: {
				render: function (row, key, columnIndex) {
					var data = row.data;

					if (data[key] >= 18) {
						var btn = document.createElement("button");
						btn.innerHTML = data[key];
						btn.onclick = function () {
							alert("I am " + data[key] + " years old, I want a bottle of wine!");
						};

						return btn;
					}
					else {
						var span = document.createElement("span");
						span.innerHTML = data[key];
						return span;
					}
				},
				destroy: function () {

				}
			}
		},
		{
			label: "",
			field: "",
			itemRenderer: {
				render: function (row, key, columnIndex) {
					var btn = document.createElement("button");
					btn.innerHTML = "Grow up";
					btn.onclick = function () {
						row.set("age", row.get("age") + 1);
						row.grid.refresh();
					};
					return btn;
				}
			}
		}
	];

	var data = [
		{
			index: 1,
			name: "Tom",
			gender: "1",
			age: 5
		},
		{
			index: 2,
			name: "Jerry",
			gender: "0",
			age: 2
		},
		{
			index: 3,
			name: "Sun Wukong",
			gender: "1",
			age: 1024
		}
	];

	grid.loadColumns(columns);
	grid.loadData(data);
}

function newClicked() {
	state = "New";
	switchButtons("Confirm");
	enableForm(true);

	setFormData({});
}

function modifyClicked() {
	state = "Modify";
	switchButtons("Confirm");
	enableForm(true);
}

function deleteClicked() {
	if (confirm("Sure?")) {
		grid.removeRow(grid.selectedRow);
	}
}

function okClicked() {
	var data = {
		index: document.getElementById("inputIndex").value,
		name: document.getElementById("inputName").value,
		gender: document.getElementById("selectGender").value,
		age: document.getElementById("inputAge").value
	};

	if (state === "New") {
		grid.insertRow(data);
	}
	else if (state === "Modify") {
		grid.selectedRow.refresh(data);
		grid.refresh();
	}
	state = "View";
	switchButtons("Operate");
	enableForm(false);
}

function cancelClicked() {
	state = "View";
	switchButtons("Operate");
	enableForm(false);

	setFormData(grid.selectedRow.data);
}

function enableForm(flag) {
	document.getElementById("inputIndex").disabled = !flag;
	document.getElementById("inputName").disabled = !flag;
	document.getElementById("selectGender").disabled = !flag;
	document.getElementById("inputAge").disabled = !flag;
}

function switchButtons(group) {
	if (group === "Operate") {
		document.getElementById("operateBtns").style.display = "";
		document.getElementById("confirmBtns").style.display = "none";
	}
	else if (group === "Confirm") {
		document.getElementById("operateBtns").style.display = "none";
		document.getElementById("confirmBtns").style.display = "";
	}
}

function getFormData() {
	return {
		index: document.getElementById("inputIndex").value,
		name: document.getElementById("inputName").value,
		gender: document.getElementById("selectGender").value,
		age: document.getElementById("inputAge").value
	};
}

function setFormData(data) {
	document.getElementById("inputIndex").value = data.index || "";
	document.getElementById("inputName").value = data.name || "";
	document.getElementById("selectGender").value = data.gender || "";
	document.getElementById("inputAge").value = data.age || "";
}
</script>
</body>
</html>